<template>
  <div>
    <van-count-down :time="time">
      <template #default="timeData">
        <span class="block">{{
          timeData.hours < 10 ? "0" + timeData.hours : timeData.hours
        }}</span>
        <span class="colon">:</span>
        <span class="block">{{
          timeData.minutes < 10 ? "0" + timeData.minutes : timeData.minutes
        }}</span>
        <span class="colon">:</span>
        <span class="block">{{
          timeData.seconds < 10 ? "0" + timeData.seconds : timeData.seconds
        }}</span>
      </template>
    </van-count-down>
  </div>
</template>

<script>
export default {
  name: "FxhDemoCounttime",
  props: ["timeSwap"],
  data() {
    return {
      time: undefined,
    };
  },
  created() {
    this.time = this.timeSwap * 1000 - new Date();
  },
  mounted() {},

  methods: {},
};
</script>

<style lang="scss" scoped>
.colon {
  display: inline-block;
  margin: 0 4px;
  color: white;
}
.block {
  display: inline-block;
  width: 22px;
  color: rgb(255, 68, 143);
  font-size: 12px;
  text-align: center;
  background-color: white;
}
</style>
